<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环</title>
</head>
<body>
<div id="app">
    城市: <select>
            <option v-for="city in cityList" v-text="city"></option>
        </select>
    <hr>
    用户列表:
    <table border="1" width="600px">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>地址</th>
            <th>年龄</th>
        </tr>
        <tr v-for="(user,index) in userList">
            <td v-text="index+1"></td>
            <td v-text="user.name"></td>
            <td v-text="user.age"></td>
            <td v-text="user.address"></td>
            <td v-text="user.gender==1?'男':'女'"></td>
        </tr>
    </table>
</div>

<script src="js/vue.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            cityList: ["北京", "上海", "广州", "深圳", "杭州", "天津"],
            userList:[
                {name:"张三",age:18,address:"深圳",gender:1},
                {name:"李四",age:19,address:"北京",gender:2},
                {name:"王五",age:20,address:"武汉",gender:2},
                {name:"赵柳",age:21,address:"上海",gender:1}
            ]

        }
    })
</script>
</body>
</html>